<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>The <code>&lt;md-content&gt;</code> directive is a container element useful for scrollable content. It achieves
this by setting the CSS <code>overflow</code> property to <code>auto</code> so that content can properly scroll.</p>
<p>In general, <code>&lt;md-content&gt;</code> components are not designed to be nested inside one another. If
possible, it is better to make them siblings. This often results in a better user experience as
having nested scrollbars may confuse the user.</p>
<h2 id="troubleshooting">Troubleshooting</h2>
<p>In some cases, you may wish to apply the <code>md-no-momentum</code> class to ensure that Safari&#39;s
momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
SVG icons and some other components.</p>
<p>Additionally, we now also offer the <code>md-no-flicker</code> class which can be applied to any element
and uses a Webkit-specific filter of <code>blur(0px)</code> that forces GPU rendering of all elements
inside (which eliminates the flicker on iOS devices).</p>
<p><em><b>Note:</b> Forcing an element to render on the GPU can have unintended side-effects, especially
related to the z-index of elements. Please use with caution and only on the elements needed.</em></p>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <p>Add the <code>[layout-padding]</code> attribute to make the content padded.</p>
<hljs lang="html">
 <md-content layout-padding>
     Lorem ipsum dolor sit amet, ne quod novum mei.
 </md-content>
</hljs>
  
  </section>
  
  


  
</div>


</div>
